<template>
  <div class="">
    <!-- 底部 -->
    <ul class="bottom">
      <li @click="$router.push('/')" :class="{active:$route.path==='/last'}" >
        <img  src="../../assets/tabbar/home.png" alt="" />
        <!-- <img  src="../../assets/tabbar/home1.png" alt="" /> -->
        <p>首页</p>
      </li>
      <li @click="$router.push('/mall')" :class="{active:$route.path ==='/mall'}">
        <img  src="../../assets/tabbar/shop.png" alt="" />
        <!-- <img src="../../assets/tabbar/shop1.png" alt="" /> -->
        <p>商城</p>
      </li>
      <li @click="$router.push('/cart')" :class="{active:$route.path==='/cart'}">
        <img  src="../../assets/tabbar/cart.png" alt="" />
        <!-- <img  src="../../assets/tabbar/cart1.png" alt="" /> -->
        <p @click="btnClick">购物车</p>
      </li>
      <li @click="$router.push('/mine')" :class="{active:$route.path==='/mine'}">
        <img  src="../../assets/tabbar/my.png" alt="" />
        <!-- <img  src="../../assets/tabbar/my1.png" alt="" /> -->
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Isshow: false,
    };
  },
  methods: {
    btnClick() {
      this.Isshow = true;
    },
  },
};
</script>
 
<style lang="less" scoped>
.bottom {
  width: 100vw;
  height: 15vw;
  background-color: #f6f6f6;
  // position: fixed;
  // bottom: 0;
  // left: 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  li {
    font-size: 2vw;
    text-align: center;
    color: #000;
    img {
      width: 5vw;
      height: 5vw;
      text-align: center;
      color: #ff5777;
    }
  }
  .active {
    color: #ff5777;
  }
}
</style>